<template>
  <div class="question-detail-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="breadcrumb">
          <router-link to="/search-question" class="breadcrumb-link">题库</router-link>
          <span class="breadcrumb-separator">/</span>
          <span class="breadcrumb-current">题目详情</span>
        </div>
        <h1 class="page-title">题目详情</h1>
        <p class="page-subtitle">查看题目详情，进行在线练习</p>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>

    <!-- 题目详情内容 -->
    <div v-else-if="question.id" class="question-content">
      <div class="content-layout">
        <!-- 左侧主要内容 -->
        <div class="main-content">
          <!-- 题目信息 -->
          <div class="question-info-card">
            <div class="question-header">
              <div class="question-meta">
                <el-tag :type="getDifficultyTag()" size="large">{{ getDifficultyText() }}</el-tag>
                <el-tag type="info" size="large">{{ question.category?.name || '未分类' }}</el-tag>
                <span class="question-score">分值：{{ question.maxScore || 100 }}分</span>
              </div>
              <div class="question-actions">
                <el-button type="text" @click="handleFavorite">
                  <el-icon><Star /></el-icon>
                  {{ isFavorite ? '已收藏' : '收藏' }}
                </el-button>
                <el-button type="text" @click="handleShare">
                  <el-icon><Share /></el-icon>
                  分享
                </el-button>
              </div>
            </div>
            
            <div class="question-content">
              <h2 class="question-title">{{ question.title }}</h2>
              <div class="question-description" v-if="question.description">
                <p>{{ question.description }}</p>
              </div>
            </div>
          </div>

          <!-- 题目选项 -->
          <div class="question-options-card">
            <h3 class="card-title">题目选项</h3>
            <div class="options-list">
              <div 
                v-for="(option, index) in question.options" 
                :key="option.id" 
                class="option-item"
                :class="{
                  'selected': userAnswer === index,
                  'correct': showAnswer && option.isCorrect,
                  'incorrect': showAnswer && userAnswer === index && !option.isCorrect
                }"
                @click="handleOptionSelect(index)"
              >
                <div class="option-label">{{ String.fromCharCode(65 + index) }}</div>
                <div class="option-content">
                  <p>{{ option.content }}</p>
                  <div v-if="showAnswer && option.isCorrect" class="correct-indicator">
                    <el-icon><Check /></el-icon>
                    正确答案
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 答题操作 -->
          <div class="question-actions-card">
            <div class="action-buttons">
              <el-button 
                v-if="!showAnswer"
                type="primary" 
                @click="handleSubmit"
                :disabled="userAnswer === null"
                class="action-btn"
              >
                提交答案
              </el-button>
              <el-button 
                v-if="showAnswer"
                type="success" 
                @click="handleNext"
                class="action-btn"
              >
                下一题
              </el-button>
              <el-button 
                v-if="showAnswer"
                type="default" 
                @click="handleRetry"
                class="action-btn"
              >
                重新作答
              </el-button>
            </div>
          </div>

          <!-- AI智能解题 -->
          <AiSolver />

          <!-- 答案解析 -->
          <div v-if="showAnswer" class="question-explanation-card">
            <h3 class="card-title">答案解析</h3>
            <div class="explanation-content">
              <div class="result-summary">
                <div class="result-item" :class="{ 'correct': isCorrect }">
                  <el-icon><Check v-if="isCorrect" /><Close v-else /></el-icon>
                  <span>{{ isCorrect ? '回答正确' : '回答错误' }}</span>
                </div>
                <div class="result-score">
                  得分：{{ isCorrect ? question.maxScore : 0 }} / {{ question.maxScore }}
                </div>
              </div>
              
              <div class="explanation-text">
                <h4>解析：</h4>
                <p>{{ question.explanation || '暂无解析' }}</p>
              </div>
              
              <div class="knowledge-points" v-if="question.knowledgePoints && question.knowledgePoints.length">
                <h4>知识点：</h4>
                <div class="points-list">
                  <el-tag v-for="point in question.knowledgePoints" :key="point.id" size="small" class="point-tag">
                    {{ point.name }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>

          <!-- 用户评论 -->
          <div class="question-comments-card">
            <h3 class="card-title">用户评论 ({{ comments.length }})</h3>
            <div class="comment-form">
              <el-input
                v-model="newComment"
                type="textarea"
                :rows="3"
                placeholder="写下你的评论..."
                class="comment-input"
              />
              <div class="comment-actions">
                <el-button type="primary" @click="handleSubmitComment" :loading="isSubmitting">
                  发表评论
                </el-button>
              </div>
            </div>
            
            <div class="comments-list">
              <div v-for="comment in comments" :key="comment.id" class="comment-item">
                <div class="comment-avatar">
                  <img :src="comment.user?.avatar || '/default-avatar.png'" :alt="comment.user?.username" />
                </div>
                <div class="comment-content">
                  <div class="comment-header">
                    <span class="comment-user">{{ comment.user?.username }}</span>
                    <span class="comment-time">{{ formatDate(comment.createdAt) }}</span>
                  </div>
                  <p class="comment-text">{{ comment.content }}</p>
                  <div class="comment-actions">
                    <el-button type="text" size="small" @click="handleLikeComment(comment.id)">
                      <el-icon><Star /></el-icon>
                      {{ comment.likeCount || 0 }}
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="sidebar">
          <!-- 题目统计 -->
          <div class="question-stats-card">
            <h3 class="card-title">题目统计</h3>
            <div class="stats-content">
              <div class="stat-item">
                <span class="stat-label">答题次数：</span>
                <span class="stat-value">{{ question.attemptCount || 0 }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">正确率：</span>
                <span class="stat-value">{{ question.accuracy || 0 }}%</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">平均用时：</span>
                <span class="stat-value">{{ question.avgTime || 0 }}秒</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">难度系数：</span>
                <span class="stat-value">{{ question.difficulty || 0 }}</span>
              </div>
            </div>
          </div>

          <!-- 相关题目 -->
          <div class="related-questions-card">
            <h3 class="card-title">相关题目</h3>
            <div class="related-list">
              <div v-for="related in relatedQuestions" :key="related.id" class="related-item" @click="navigateToQuestion(related.id)">
                <div class="related-info">
                  <h4 class="related-title">{{ related.title }}</h4>
                  <div class="related-meta">
                    <el-tag :type="getDifficultyTag(related.difficulty)" size="small">
                      {{ getDifficultyText(related.difficulty) }}
                    </el-tag>
                    <span class="related-accuracy">{{ related.accuracy }}% 正确率</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 学习建议 -->
          <div class="study-tips-card">
            <h3 class="card-title">学习建议</h3>
            <div class="tips-content">
              <div class="tip-item">
                <el-icon><Star /></el-icon>
                <span>建议仔细阅读题目，理解题意后再作答</span>
              </div>
              <div class="tip-item">
                <el-icon><Clock /></el-icon>
                <span>合理分配时间，不要在一道题上花费过多时间</span>
              </div>
              <div class="tip-item">
                <el-icon><Document /></el-icon>
                <span>查看解析，理解解题思路和方法</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 404状态 -->
    <div v-else class="not-found">
      <el-empty description="题目不存在或已被删除">
        <el-button type="primary" @click="$router.push('/search-question')">
          返回题库
        </el-button>
      </el-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Star, Share, Check, Close, Clock, Document } from '@element-plus/icons-vue'
import { formatDate } from '@/utils/common'
import AiSolver from '@/components/AiSolver.vue'
import { addBrowseHistory } from '@/api/history'
import { addCollection, removeCollection } from '@/api/collection'

// 路由
const route = useRoute()
const router = useRouter()

// 数据状态
const loading = ref(false)
const question = ref<any>({})
const comments = ref<any[]>([])
const relatedQuestions = ref<any[]>([])
const newComment = ref('')
const isSubmitting = ref(false)
const isFavorite = ref(false)
const userAnswer = ref<number | null>(null)
const showAnswer = ref(false)
const isCorrect = ref(false)

// 计算属性
const questionId = computed(() => route.params.id as string)

// 获取难度标签
const getDifficultyTag = (difficulty?: number) => {
  const level = difficulty || question.value.difficulty || 1
  if (level <= 2) return 'success'
  if (level <= 4) return 'warning'
  return 'danger'
}

// 获取难度文本
const getDifficultyText = (difficulty?: number) => {
  const level = difficulty || question.value.difficulty || 1
  if (level <= 2) return '简单'
  if (level <= 4) return '中等'
  return '困难'
}

// 加载题目详情
const loadQuestionDetail = async () => {
  try {
    loading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟数据
    question.value = {
      id: questionId.value,
      title: '下列哪个选项是正确的？',
      description: '请仔细阅读题目，选择最合适的答案。',
      type: 'single',
      difficulty: 3,
      maxScore: 100,
      category: { id: 1, name: '行测' },
      options: [
        { id: 1, content: '选项A：这是第一个选项', isCorrect: false },
        { id: 2, content: '选项B：这是第二个选项', isCorrect: true },
        { id: 3, content: '选项C：这是第三个选项', isCorrect: false },
        { id: 4, content: '选项D：这是第四个选项', isCorrect: false }
      ],
      explanation: '根据题目要求，选项B是正确的答案。这是因为...',
      knowledgePoints: [
        { id: 1, name: '逻辑推理' },
        { id: 2, name: '判断推理' }
      ],
      attemptCount: 1250,
      accuracy: 68,
      avgTime: 45,
      createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString()
    }
    
    comments.value = [
      {
        id: 1,
        content: '这道题很有代表性，解析也很清楚！',
        user: { username: '备考小白', avatar: 'https://picsum.photos/id/1011/200/200' },
        likeCount: 3,
        createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString()
      },
      {
        id: 2,
        content: '难度适中，适合练习',
        user: { username: '努力备考中', avatar: 'https://picsum.photos/id/1012/200/200' },
        likeCount: 1,
        createdAt: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString()
      }
    ]
    
    relatedQuestions.value = [
      {
        id: 2,
        title: '下列哪个选项是错误的？',
        difficulty: 2,
        accuracy: 75
      },
      {
        id: 3,
        title: '根据题意选择最佳答案',
        difficulty: 4,
        accuracy: 45
      }
    ]
    
    // 记录浏览历史
    const userId = localStorage.getItem('userId') || localStorage.getItem('user_id') || '1'
    if (userId && question.value) {
      // 创建浏览历史数据
      const historyData = {
        id: Date.now(),
        userId: Number(userId),
        contentType: 'QUESTION',
        contentId: Number(questionId.value),
        contentTitle: question.value.title,
        contentDescription: question.value.description?.substring(0, 100),
        contentUrl: `/search-question?id=${questionId.value}`,
        browseTime: new Date().toISOString(),
        createdAt: new Date().toISOString()
      };
      
      try {
        // 尝试调用API
        // 使用静态导入的addBrowseHistory
        await addBrowseHistory({
          userId: Number(userId),
          contentType: 'QUESTION',
          contentId: Number(questionId.value),
          contentTitle: question.value.title,
          contentDescription: question.value.description?.substring(0, 100),
          contentUrl: `/search-question?id=${questionId.value}`
        })
        console.log('API题目浏览历史记录成功')
      } catch (historyError) {
        console.error('API记录题目浏览历史失败，使用本地存储:', historyError)
      }
      
      // 无论API是否成功，都保存到本地存储
      const historyKey = `browse_history_${userId}`;
      const existingHistory = JSON.parse(localStorage.getItem(historyKey) || '[]');
      
      // 检查是否已存在相同的浏览记录
      const existingIndex = existingHistory.findIndex((item: any) => 
        item.contentType === 'QUESTION' && item.contentId === Number(questionId.value)
      );
      
      if (existingIndex !== -1) {
        // 如果已存在，更新浏览时间
        existingHistory[existingIndex].browseTime = new Date().toISOString();
      } else {
        // 如果不存在，添加新记录
        existingHistory.unshift(historyData);
      }
      
      // 只保留最近100条记录
      if (existingHistory.length > 100) {
        existingHistory.splice(100);
      }
      
      localStorage.setItem(historyKey, JSON.stringify(existingHistory));
      console.log('题目浏览历史已保存到本地存储');
    }
    
  } catch (error) {
    console.error('加载题目详情失败:', error)
    ElMessage.error('加载题目详情失败')
  } finally {
    loading.value = false
  }
}

// 选择选项
const handleOptionSelect = (index: number) => {
  if (!showAnswer.value) {
    userAnswer.value = index
  }
}

// 提交答案
const handleSubmit = () => {
  if (userAnswer.value === null) {
    ElMessage.warning('请选择一个答案')
    return
  }
  
  showAnswer.value = true
  isCorrect.value = question.value.options[userAnswer.value]?.isCorrect || false
  
  if (isCorrect.value) {
    ElMessage.success('回答正确！')
  } else {
    ElMessage.error('回答错误，请查看解析')
  }
}

// 下一题
const handleNext = () => {
  // 跳转到下一题或返回题库
  router.push('/search-question')
}

// 重新作答
const handleRetry = () => {
  userAnswer.value = null
  showAnswer.value = false
  isCorrect.value = false
}

// 收藏题目
const handleFavorite = async () => {
  if (!question.value) return
  
  try {
    const userId = localStorage.getItem('userId') || localStorage.getItem('user_id') || '1'
    
    if (isFavorite.value) {
      // 取消收藏
      try {
        // 使用静态导入的removeCollection
        await removeCollection(Number(userId), 'QUESTION', Number(question.value.id))
        isFavorite.value = false
        ElMessage.success('取消收藏成功')
      } catch (error) {
        console.error('取消收藏失败:', error)
        ElMessage.error('取消收藏失败')
      }
    } else {
      // 添加收藏
      try {
        // 使用静态导入的addCollection
        await addCollection({
          userId: Number(userId),
          contentType: 'QUESTION',
          contentId: Number(question.value.id),
          contentTitle: question.value.title,
          contentDescription: question.value.description?.substring(0, 100),
          contentUrl: `/search-question?id=${question.value.id}`
        })
        isFavorite.value = true
        ElMessage.success('收藏成功')
      } catch (error) {
        console.error('收藏失败:', error)
        ElMessage.error('收藏失败')
      }
    }
  } catch (error) {
    console.error('收藏操作失败:', error)
    ElMessage.error('操作失败')
  }
}

// 分享题目
const handleShare = () => {
  const url = window.location.href
  navigator.clipboard.writeText(url).then(() => {
    ElMessage.success('链接已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败')
  })
}

// 提交评论
const handleSubmitComment = async () => {
  if (!newComment.value.trim()) {
    ElMessage.warning('请输入评论内容')
    return
  }
  
  try {
    isSubmitting.value = true
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    const comment = {
      id: Date.now(),
      content: newComment.value,
      user: { username: '当前用户', avatar: '/default-avatar.png' },
      likeCount: 0,
      createdAt: new Date().toISOString()
    }
    
    comments.value.unshift(comment)
    newComment.value = ''
    ElMessage.success('评论发表成功')
  } catch (error) {
    ElMessage.error('发表评论失败')
  } finally {
    isSubmitting.value = false
  }
}

// 点赞评论
const handleLikeComment = (commentId: number) => {
  const comment = comments.value.find(c => c.id === commentId)
  if (comment) {
    comment.likeCount = (comment.likeCount || 0) + 1
    ElMessage.success('点赞成功')
  }
}

// 跳转到相关题目
const navigateToQuestion = (id: number) => {
  router.push(`/question-detail/${id}`)
}

// 组件挂载时加载数据
onMounted(() => {
  loadQuestionDetail()
})
</script>

<style lang="scss" scoped>
.question-detail-view {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 30px;
  
  .header-content {
    .breadcrumb {
      margin-bottom: 10px;
      font-size: 14px;
      color: #666;
      
      .breadcrumb-link {
        color: #409eff;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
      
      .breadcrumb-separator {
        margin: 0 8px;
        color: #ccc;
      }
      
      .breadcrumb-current {
        color: #333;
      }
    }
    
    .page-title {
      font-size: 28px;
      font-weight: 600;
      color: #333;
      margin: 0 0 10px 0;
    }
    
    .page-subtitle {
      font-size: 16px;
      color: #666;
      margin: 0;
    }
  }
}

.loading-container {
  padding: 40px;
}

.question-content {
  .content-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }
  
  .main-content {
    .question-info-card {
      background: white;
      border-radius: 12px;
      padding: 30px;
      margin-bottom: 30px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      
      .question-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        
        .question-meta {
          display: flex;
          align-items: center;
          gap: 15px;
          
          .question-score {
            color: #666;
            font-size: 14px;
          }
        }
        
        .question-actions {
          display: flex;
          gap: 10px;
        }
      }
      
      .question-content {
        .question-title {
          font-size: 20px;
          font-weight: 600;
          color: #333;
          margin: 0 0 15px 0;
          line-height: 1.5;
        }
        
        .question-description {
          p {
            color: #666;
            line-height: 1.6;
            margin: 0;
          }
        }
      }
    }
    
    .question-options-card,
    .question-actions-card,
    .question-explanation-card,
    .question-comments-card {
      background: white;
      border-radius: 12px;
      padding: 30px;
      margin-bottom: 30px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      
      .card-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 0 0 20px 0;
      }
    }
    
    .options-list {
      .option-item {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 15px;
        border: 2px solid #f0f0f0;
        border-radius: 8px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.2s;
        
        &:hover {
          border-color: #409eff;
        }
        
        &.selected {
          border-color: #409eff;
          background-color: #f0f8ff;
        }
        
        &.correct {
          border-color: #67c23a;
          background-color: #f0f9ff;
        }
        
        &.incorrect {
          border-color: #f56c6c;
          background-color: #fef0f0;
        }
        
        .option-label {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background-color: #f0f0f0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          color: #666;
          flex-shrink: 0;
        }
        
        .option-content {
          flex: 1;
          
          p {
            margin: 0;
            color: #333;
            line-height: 1.5;
          }
          
          .correct-indicator {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #67c23a;
            font-size: 14px;
            margin-top: 8px;
          }
        }
      }
    }
    
    .action-buttons {
      display: flex;
      gap: 15px;
      
      .action-btn {
        flex: 1;
        min-width: 120px;
      }
    }
    
    .explanation-content {
      .result-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
        background-color: #f8f9fa;
        
        .result-item {
          display: flex;
          align-items: center;
          gap: 8px;
          font-weight: 600;
          
          &.correct {
            color: #67c23a;
          }
          
          &:not(.correct) {
            color: #f56c6c;
          }
        }
        
        .result-score {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
      }
      
      .explanation-text {
        margin-bottom: 20px;
        
        h4 {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin: 0 0 10px 0;
        }
        
        p {
          color: #666;
          line-height: 1.6;
          margin: 0;
        }
      }
      
      .knowledge-points {
        h4 {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin: 0 0 10px 0;
        }
        
        .points-list {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          
          .point-tag {
            margin: 0;
          }
        }
      }
    }
    
    .comment-form {
      margin-bottom: 30px;
      
      .comment-input {
        margin-bottom: 15px;
      }
      
      .comment-actions {
        display: flex;
        justify-content: flex-end;
      }
    }
    
    .comments-list {
      .comment-item {
        display: flex;
        gap: 15px;
        padding: 20px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .comment-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
          flex-shrink: 0;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        
        .comment-content {
          flex: 1;
          
          .comment-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
            
            .comment-user {
              font-weight: 500;
              color: #333;
            }
            
            .comment-time {
              font-size: 12px;
              color: #999;
            }
          }
          
          .comment-text {
            color: #666;
            line-height: 1.5;
            margin: 0 0 10px 0;
          }
          
          .comment-actions {
            .el-button {
              padding: 4px 8px;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  
  .sidebar {
    .question-stats-card,
    .related-questions-card,
    .study-tips-card {
      background: white;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      
      .card-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin: 0 0 15px 0;
      }
    }
    
    .stats-content {
      .stat-item {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .stat-label {
          color: #666;
        }
        
        .stat-value {
          font-weight: 600;
          color: #333;
        }
      }
    }
    
    .related-list {
      .related-item {
        padding: 15px;
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.2s;
        
        &:hover {
          border-color: #409eff;
          background-color: #f8f9fa;
        }
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .related-info {
          .related-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin: 0 0 8px 0;
            line-height: 1.3;
          }
          
          .related-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            
            .related-accuracy {
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
    
    .tips-content {
      .tip-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .el-icon {
          color: #409eff;
          font-size: 16px;
          margin-top: 2px;
        }
        
        span {
          font-size: 14px;
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }
}

.not-found {
  padding: 60px 20px;
  text-align: center;
}
</style>
